<template>
	<view class="activity-info">
		<view class="activity-list">
			<view class="activity-item" v-for="(data,index) in list" :key="index">
				<view class="activity-item-image"><image :src="data.img" mode="aspectFill"></image></view>
				<view class="activity-item-info">
					<view class="title">{{data.name}}</view>
					<view class="like">
						<text>点赞数：<text class="val">{{data.like}}</text></text>
						<text>排名：{{index+1}}</text>
					</view>
					<view class="auth">
						<view class="auth-info"><image :src="data.user.heard_img"></image>{{data.user.nickname}}</view>
						<view class="see">{{data.click}}人看过</view>
					</view>
					<view class="user">
						<view class="user-info" @click="goUserInfo(data.user.user_id)">用户信息</view>
						<view class="user-match" @click="goMatchInfo(data.match_id)">查看方案</view>
					</view>
				</view>
			</view>
		</view>
		<loading v-if="isLoading"></loading>
		<no-more text='没有更多了' v-if="noMore && list.length"></no-more>
		<nothing :btn="false" text="还没有人参加活动哦~" v-if="!list.length"></nothing>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 0,
				rule_id: '',
				isLoading: false,
				noMore: false
			};
		},
		onLoad(options) {
			this.rule_id = options.rule_id
			this.init()
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.isLoading = true
				this.init()
			}
		},
		methods: {
			init(){
				this.$api.matchList({rule_id: this.rule_id,page: this.page,order_by: 'like',asc: 2}).then(res => {
					this.isLoading = false
					if(res.datas.list.length){
						res.datas.list.forEach(item => {
							this.list.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			goUserInfo(user_id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/index/user-dynamic-info?type=0&user_id='+user_id
				})
			},
			goMatchInfo(match_id){
				let url = 'https://master.jiaju01.com/web/shop/#/tie-in/tie-in-preview?match_id='+match_id
				console.log(url)
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/webview/webview?url='+encodeURIComponent(url)
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFF;
	}
	.activity-info{
		padding: 30rpx;
		.activity-list{
			.activity-item{
				display: flex;
				border-bottom: solid 2rpx #F5F5F5;
				padding-bottom: 40rpx;
				margin-bottom: 40rpx;
				.activity-item-image{
					width: 320rpx;
					height: 240rpx;
					image{
						width: 320rpx;
						height: 240rpx;
						border-radius: 8rpx;
					}
				}
				.activity-item-info{
					flex: 1;
					min-width: 0;
					margin-left: 30rpx;
					.title{
						font-size: 28rpx;
						line-height: 46rpx;
						font-weight: bold;
						color: #141414;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.like{
						margin: 20rpx 0;
						text{
							font-size: 22rpx;
							color: #6B6B6B;
							&:first-child{
								margin-right: 40rpx;
							}
							text.val{
								color: #2073f5;
							}
						}
					}
					.auth{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.auth-info{
							display: flex;
							align-items: center;
							font-size: 20rpx;
							color: #6B6B6B;
							image{
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
								border: solid 2rpx #eee;
								margin-right: 10rpx;
							}
						}
						.see{
							color: #A4A4A4;
							font-size: 20rpx;
						}
					}
					.user{
						display: flex;
						margin-top: 20rpx;
						.user-info,
						.user-match{
							font-size: 24rpx;
							height: 50rpx;
							line-height: 46rpx;
							border: solid 2rpx #2073f5;
							color: #2073f5;
							border-radius: 8rpx;
							padding: 0 10rpx;
						}
						.user-info{
							background-color: #2073f5;
							color: #FFF;
							margin: 0 30rpx 0 0;
						}
					}
				}
			}
		}
	}	
</style>
